<div class="navigation-bar dark">
    <div class="navigation-bar-content container">
        <a href="/" class="element"><span class="icon-grid-view"></span> METRO UI CSS <sup>2.0</sup></a>

        <span class="element-divider"></span>

        <div class="element">
            <a class="dropdown-toggle" href="#">Base CSS</a>
            <ul class="dropdown-menu" id="base-submenu" data-role="dropdown">
                <li><a href="requirements.html">Requirements</a></li>
                <li><a href="global.html">Global styles</a></li>
                <li class="disabled"><a href="layouts.html">Layouts and templates</a></li>
                <li><a href="grid.html">Grid system</a></li>
                <li class="divider"></li>
                <li class="disabled"><a href="responsive.html">Responsive</a></li>
                <li class="divider"></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="tables.html">Tables</a></li>
                <li><a href="forms.html">Forms</a></li>
                <li><a href="buttons.html">Buttons</a></li>
                <li><a href="images.html">Images</a></li>
                <li class="divider"></li>
                <li><a href="icons.html">Icons</a></li>
            </ul>
        </div>

        <div class="element">
            <a class="dropdown-toggle"  href="#">Components</a>
            <ul class="dropdown-menu" id="components-submenu" data-role="dropdown">
                <li><a href="tiles.html">Tiles</a></li>
                <li>
                    <a href="#" class="dropdown-toggle">Navigation</a>
                    <ul class="dropdown-menu">
                        <li><a href="navbar.html">Navigation Bar</a></li>
                        <li><a href="menus.html">Menus</a></li>
                        <li><a href="fluent-menu.html">Fluent Menu</a></li>
                        <li><a href="sidebar.html">Sidebar</a></li>
                        <li><a href="tab-control.html">Tab Control</a></li>
                        <li><a href="accordion.html">Accordion</a></li>
                        <li><a href="buttons.html#_set">Button Set</a></li>
                        <li><a href="buttons.html#_breadcrumbs">Breadcrumbs</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle">Visualisation</a>
                    <ul class="dropdown-menu">
                        <li><a href="rating.html">Rating</a></li>
                        <li><a href="progress-bar.html">Progress Bar</a></li>
                        <li><a href="slider.html">Slider</a></li>
                        <li><a href="carousel.html">Carousel</a></li>
                        <li><a href="treeview.html">TreeView</a></li>
                        <li><a href="lists.html">Lists</a></li>
                        <li><a href="hint.html">Hint</a></li>
                        <li><a href="balloon.html">Balloon</a></li>
                        <li><a href="stepper.html">Stepper</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle">Date and Time</a>
                    <ul class="dropdown-menu">
                        <li><a href="calendar.html">Calendar</a></li>
                        <li><a href="datepicker.html">DatePicker</a></li>
                        <li><a href="times.html">Times</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle">Information</a>
                    <ul class="dropdown-menu">
                        <li><a href="window.html">Window</a></li>
                        <li><a href="dialog.html">Dialog</a></li>
                        <li><a href="notify.html">Notify</a></li>
                    </ul>
                </li>
<!--
                <li class="divider"></li>
                <li>
                    <a href="#" class="dropdown-toggle">Thread Party</a>
                    <ul class="dropdown-menu">
                        <li class="disabled"><a href="#">Dialog</a></li>
                    </ul>
                </li>
                <li class="divider"></li>
                <li class="disabled"><a href="cards.html">Deck of cards</a></li>
-->
            </ul>
        </div>

        <div class="element">
            <a class="dropdown-toggle"  href="#">Community</a>
            <ul class="dropdown-menu" id="community-submenu" data-role="dropdown">
                <li class="disabled"><a href="http://blog.metroui.net">Blog</a></li>
                <li class="disabled"><a href="http://forum.metroui.net">Community Forum</a></li>
                <li class="divider"></li>
                <li><a href="https://github.com/olton/Metro-UI-CSS">Github</a></li>
            </ul>
        </div>

        <div class="element">
            <a href="one-page-example.html" class="fg-yellow">Big Example</a>
        </div>

        <span class="element-divider place-right"></span>
        <a title="GitHub" href="https://github.com/olton/Metro-UI-CSS" class="element place-right"><span class="icon-github-6"></span></a>
        <span class="element-divider place-right"></span>
        <a title="CSS3 validator" href="http://jigsaw.w3.org/css-validator/validator?uri=metroui.org.ua&profile=css3&usermedium=all&warning=no&vextwarning=" class="element place-right"><span class="icon-css3"></span></a>
        <span class="element-divider place-right"></span>
        <div class="element place-right" title="GitHub Stars"><span class="icon-star"></span> <span class="github-watchers">0</span></div>
        <span class="element-divider place-right"></span>
        <div class="element place-right" title="GitHub Forks"><span class="icon-share-2"></span> <span class="github-forks">0</span></div>
        <span class="element-divider place-right"></span>
    </div>
</div>
